<template>
	<view class="mode">
		<view class="top">
			<view class="">

			</view>
			规格
			<image @tap="close" src="/static/img/index/73.png" mode="widthFix"></image>
		</view>
		<view class="select" v-if="data.num == 0">
			<view class="top1">
				不同规格可对应不同价格（单选）
				<text @tap="handeClick(3)">更多规格</text>
			</view>
			<view class="list">
				<view class="listItem" v-for="(item,index) in data.list" :key="index">
					<view class="listItem_1" @tap="handeClick2(item)">
						<image
							:src="item.values.filter(item=>item.bool).length == item.values.length && item.values.length?'/static/img/index/49.png':item.values.filter(item=>item.bool).length && item.values.filter(item=>item.bool).length != item.values.length && item.values.length?'/static/img/index/166.png':'/static/img/index/52.png'"
							mode="widthFix"></image>
						{{item.titleName}}
					</view>
					<view class="listItem_2">
						<text @longpress="longpress(item,item1.id1 || item1.id,index1)" :class="item1.bool?'active':''"
							@tap="handeClick1(item,item1)" v-for="(item1,index1) in item.values || []"
							:key="index1">{{item1.value}}</text>
						<view @tap="handeClick(2),data.activeId = item.id">
							<image src="/static/img/index/74.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="addSelect" @tap="handeClick(1)">
				<image src="/static/img/index/75.png" mode="widthFix"></image>
				添加规格
			</view>
		</view>
		<view class="add" v-else-if="data.num == 1">
			规格名称
			<view class="input">
				<input :maxlength="16" v-model="data.name" type="text" placeholder="可填规格例如:尺码" />
				{{data.name.length}} / 16
			</view>
		</view>
		<view class="add1 add" v-else-if="data.num == 2">
			<view class="">
				给<text>{{data.list[data.list.map(item=>item.id).indexOf(data.activeId)].titleName}}</text>添加一个选项
			</view>
			<view class="input">
				<input :maxlength="16" v-model="data.name1" type="text" placeholder="填写具体的选项内容" />
				{{data.name1.length}} / 16
			</view>
		</view>
		<view class="edit" v-else>
			属性不影响价格（可多选)
			<view class="listItem" v-for="(item,index) in data.list" :key="index">
				{{item.titleName}}
				<image @tap="handeDelete(item,index)" src="/static/img/index/76.png" mode="widthFix"></image>
			</view>
		</view>
		<view v-if="data.num != 3" class="bot" @tap="submit">
			确认
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { listUserSpecAttr, saveOrUpdateSpecAttr, saveOrUpdateSpecAttrValue, deleteUserAttrSpec, deleteUserAttrSpecValue } from '@/utils/api/goods'
	const emit = defineEmits(['close', 'submit'])
	const porps = defineProps(['list'])
	const data = reactive<any>({
		num: 0,
		name: '',
		name1: '',
		list: [],
		activeId: ''
	})
	listUserSpecAttr({ data: { type: 'SPEC' } }).then((res) => {
		res.data.map((item) => {
			item.values.map((item1) => {
				// item1.id = '';
				const index = porps.list.map(item => item.specValue).indexOf(item1.value);
				console.log(index,'index')
				if (index != -1 && porps.list[index].specName == item.titleName) {
					item1.bool = true;
					item1.id1 = JSON.parse(JSON.stringify(item1.id))
					item1.id = porps.list[index].id
					item1.skuName = porps.list[index].skuName;
					item1.price = porps.list[index].price;
					item1.preferentialPrice = porps.list[index].preferentialPrice;
					item1.limitCount = porps.list[index].limitCount;
					item1.stockBalance = porps.list[index].stockBalance;
				}
			})
		})
		console.log(porps.list,'porps.list')
		console.log(res.data, 'res.data')
		data.list = res.data;
	})
	const close = () => {
		if (data.num == 0) {
			emit('close')
		} else {
			data.num = 0;
		}
	}
	const handeClick2 = (item) => {
		let str = '';
		data.list.map((item2) => {
			if (item2.values.filter(item => item.bool).length) {
				str = item2.titleName
			}
		})
		if (item.titleName != str) {
			data.list.map((item2) => {
				item2.values.map((item) => {
					item.bool = false;
				})
			})
		}
		if (item.values.filter(item => !item.bool).length) {
			item.values.map((item) => {
				item.bool = true
			})
		} else {
			item.values.map((item) => {
				item.bool = false
			})
		}

	}
	const handeClick1 = (item, item1) => {
		let str = '';
		data.list.map((item2) => {
			if (item2.values.filter(item => item.bool).length) {
				str = item2.titleName
			}
		})
		if (item.titleName != str) {
			data.list.map((item2) => {
				item2.values.map((item) => {
					item.bool = false;
				})
			})
		}
		item1.bool = !item1.bool
	}
	const longpress = (item, id, index) => {
		uni.showActionSheet({
			itemList: ['删除'],
			success: () => {
				deleteUserAttrSpecValue({ data: { id } }).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功!',
							icon: 'none'
						})
						item.values.splice(index, 1)
						emitSubmit(0)
					}
				})
			}
		})
	}
	const handeClick = (i : number) => {
		data.num = i;
		if (i == 1) {
			data.name = ''
		} else if (i == 0) {
			listUserSpecAttr({ data: { type: 'SPEC' } }).then((res) => {
				res.data.map((item) => {
					item.values.map((item1) => {
						// item1.id = '';
						data.list.map((item2) => {
							const index = item2.values.map(item => item.value).indexOf(item1.value);
							if (index != -1 && item2.titleName == item.titleName && item2.values[index].bool) {
								item1.bool = true;
								item1.id = item2.values[index].id;
								item1.skuName = item2.values[index].skuName;
								item1.price = item2.values[index].price;
								item1.preferentialPrice = item2.values[index].preferentialPrice;
								item1.limitCount = item2.values[index].limitCount;
								item1.stockBalance = item2.values[index].stockBalance;
							}
						})
					})
				})
				console.log(res.data, 'res.data')
				data.list = res.data;
			})
		} else if (i == 2) {
			data.name1 = ''
		}
	}
	const handeDelete = (item : any, index : number) => {
		uni.showModal({
			title: '提示',
			content: '是否删除改规格?',
			success: (e) => {
				if (e.confirm) {
					deleteUserAttrSpec({ data: { id: item.id } }).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功!',
								icon: 'none'
							})
							data.list.splice(index, 1)
							emitSubmit(0)
						}
					})
				}
			}
		})
	}
	const submit = () => {
		if (data.num == 1) {
			if (!data.name) {
				uni.showToast({
					title: '请输入规格名称!',
					icon: 'none'
				})
				return;
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			saveOrUpdateSpecAttr({ data: { titleName: data.name, type: 'SPEC' } }).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '添加成功!',
						icon: 'none'
					})
					handeClick(0)
				}
			})
		} else if (data.num == 2) {
			if (!data.name1) {
				uni.showToast({
					title: '请输入规格值!',
					icon: 'none'
				})
				return;
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			saveOrUpdateSpecAttrValue({ data: { value: data.name1, specAttrId: data.activeId } }).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '添加成功!',
						icon: 'none'
					})
					handeClick(0)
				}
			})
		} else {
			emitSubmit(1)
		}
	}
	const emitSubmit = (i) => {
		const arr = [];

		data.list.map((item) => {
			item.values.map((item1) => {
				if (item1.bool) {
					arr.push({ ...item1, specName: item.titleName, specValue: item1.value })
				}
			})
		})
		if (!arr.length && i) {
			uni.showToast({
				title: '请选择规格!',
				icon: 'none'
			})
			return;
		}
		if (i) {
			emit('close')
		}
		emit('submit', arr)
	}
</script>

<style lang="scss">
	.mode {
		padding: 24rpx 32rpx 90rpx 32rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #262626;
			font-size: 37rpx;
			margin-bottom: 24rpx;

			view {
				width: 30rpx;
			}

			image {
				width: 30rpx;
			}
		}

		.select {
			.top1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #8C8C8C;

				text {
					color: #1188FF;
				}
			}

			.list {
				max-height: 500rpx;
				overflow: auto;
				.listItem {
					margin-top: 16rpx;
				}

				.listItem_1 {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #262626;

					image {
						width: 36rpx;
						margin-right: 25rpx;
					}
				}

				.listItem_2 {
					margin-top: 25rpx;
					display: flex;
					flex-wrap: wrap;

					text {
						margin-bottom: 10rpx;
						padding: 10rpx 20rpx!important;
						color: #262626;
						font-size: 24rpx;
						border-radius: 8rpx;
						margin-right: 24rpx;
						background: #F4F6FA;
					}

					.active {
						color: #6B64D3;
						background: #E4E2FC;
					}

					view {
						background: #F4F6FA;
						width: 96rpx;
						border-radius: 8rpx;
						height: 52rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 24rpx;
						}
					}
				}
			}

			.addSelect {
				display: flex;
				align-items: center;
				margin-top: 48rpx;

				image {
					width: 24rpx;
					margin-right: 16rpx;
				}

				color: #6B64D3;
			}
		}

		.add {
			color: #262626;

			.input {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 12rpx;
				background: #F4F6FA;
				padding: 0 16rpx;
				color: #BFBFBF;
				margin-top: 16rpx;

				input {
					height: 64rpx;
					flex: 1;
					color: #262626;
				}
			}
		}

		.edit {
			color: #8C8C8C;

			.listItem {
				margin-top: 24rpx;
				display: flex;
				height: 68rpx;
				align-items: center;
				padding: 0 16rpx;
				justify-content: space-between;
				font-size: 26rpx;
				color: #262626;

				image {
					width: 36rpx;
				}

				border-radius: 16rpx;
				border: 2rpx solid #F4F6FA;
			}
		}

		.add1 {
			>view:nth-of-type(1) {
				color: #262626;
				display: flex;

				text {
					color: #6B64D3;
				}
			}
		}

		.bot {
			line-height: 88rpx;
			width: 510rpx;
			margin: 0 auto;
			margin-top: 56rpx;
			border-radius: 100rpx;
			text-align: center;
			background: #6B64D3;
			color: #fff;
			font-size: 32rpx;
		}
	}
</style>